<template>
  <div>
    <div class="container">
      <headroom class="mb-4" :classes="{initial: 'container'}">
        <BlogNav id="header-nav" />
      </headroom>
      <main role="main">
        <div class='row'>
          <div class="col-md-8 blog-main">
            <div class="bg-white p-4" style="min-height: 100vh;">
              <p class="text-muted">发布与：{{ $formatDateTime(article.updateDate) }}</p>
              <h2 class="text-center mb-5">{{ article.title }}</h2>
              <!-- 文章开头 -->
              <div v-html="article.content" class="tui-editor-contents"></div>
              <!-- 文章结束 -->
              <div class="mt-5 d-flex justify-content-between text-muted" >
                <router-link v-if="article.preArticle"
                  :to="`/article/${article.preArticle.id}`">
                  上一篇：{{ article.preArticle.title }}
                </router-link>
                <em v-else>上一篇：到顶了！！！</em>
                
                <router-link v-if="article.nextArticle"
                  :to="`/article/${article.nextArticle.id}`">
                  下一篇：{{ article.nextArticle.title }}
                </router-link>
                <em v-else>下一篇：见底了！！！</em>
              </div>
            </div>
          </div>
          <aside class="col-md-4 blog-sidebar">
            <BlogAside />
          </aside>
        </div>
      </main>
    </div>
    <BlogFotter />
  </div>
</template>
<script>
import { headroom } from 'vue-headroom'
import BlogHeader from '~/components/blog/BlogHeader'
import BlogNav from '~/components/blog/BlogNav'
import BlogFotter from '~/components/blog/BlogFotter'
import BlogAside from '~/components/blog/blog-main/BlogAside'
import api from '@/api'

export default {
  title: '文章内容',
  components: {
    BlogHeader,
    BlogNav,
    BlogFotter,
    BlogAside,
    headroom
  },
  created() {
    this.getArticle()
  },
  data() {
    return {
      article: {}
    }
  },
  methods: {
    getArticle() {
      const { id } = this.$route.params
      this.$get(`${api.article}/${id}`).then(res => {
        this.article = res.data.data
      })
    }
  }
}
</script>
<style lang='scss'>
@import "~/assets/blog.scss";
</style>
